<template>
	<view class="form-main">
		<view class="form-column">
			<view class="form-title">回访数据表</view>
			<view class="form-box">
				<u-form :model="form" ref="uForm" :error-type="['message']">
					<u-form-item label="院区:" label-width="80rpx" prop="deptName" required>
						<view class="u-flex select-box">
							<u-input class="u-flex-1 form-input" type="select" :select-open="yqShow" @click="yqShow = true" placeholder="请选择院区" v-model="form.deptName" />
						</view>
						<u-select v-model="yqShow" mode="single-column" :list="yqList" value-name="id" label-name="name" @confirm="onConfirmType1"></u-select>
					</u-form-item>
					<u-form-item label="实际手术日期:" label-width="200rpx" prop="sjSsDate" required>
						<view class="u-flex select-box">
							<u-input class="u-flex-1 form-input" type="select" :select-open="dateShow" @click="dateShow = true" placeholder="请选择实际手术日期" v-model="form.sjSsDate" />
						</view>
						<u-picker v-model="dateShow" mode="time" @confirm="onConfirmType2"></u-picker>
					</u-form-item>
					<u-form-item label="投保人:" label-width="110rpx" prop="tbr" required>
						<u-input class="form-input" v-model="form.tbr" placeholder="请输入投保人"/>
					</u-form-item>
					<u-form-item label="被保险人:" label-width="140rpx" prop="bbxr" required>
						<u-input class="form-input" v-model="form.bbxr" placeholder="请输入被保险人"/>
					</u-form-item>
					<u-form-item label="与投保人关系:" label-width="200rpx" prop="ytbr" required>
						<u-input class="form-input" v-model="form.ytbr" placeholder="请输入与投保人关系"/>
					</u-form-item>
					<u-form-item label="身份证号:" label-width="140rpx" prop="idCard" required>
						<u-input class="form-input" v-model="form.idCard" type="number" placeholder="请输入身份证号"/>
					</u-form-item>
					<u-form-item label="联系号码:" label-width="140rpx" prop="phone" required>
						<u-input class="form-input" v-model="form.phone" type="number" placeholder="请输入联系号码"/>
					</u-form-item>
					<u-form-item label="手术名称:" label-width="140rpx" prop="ssName" required>
						<u-input class="form-input" v-model="form.ssName" placeholder="请输入手术名称"/>
					</u-form-item>
					<u-form-item label="主刀医生:" label-width="140rpx" prop="zdYs" required>
						<u-input class="form-input" v-model="form.zdYs" placeholder="请输入主刀医生"/>
					</u-form-item>
					<u-form-item label="客服回访结果:" label-width="200rpx" prop="kfHfJg" required>
						<u-input class="form-input" v-model="form.kfHfJg" placeholder="请输入客服回访结果"/>
					</u-form-item>
					<u-form-item label="院区主管对接结果:" label-width="260rpx" prop="yqZgDjJg">
						<u-input class="form-input" v-model="form.yqZgDjJg" placeholder="请输入院区主管对接结果"/>
					</u-form-item>
					<u-form-item label="客服再次回访结果:" label-width="260rpx" prop="kfZcHfJg">
						<u-input class="form-input" v-model="form.kfZcHfJg" placeholder="请输入客服再次回访结果"/>
					</u-form-item>
					<u-form-item label="备注:" label-width="80rpx" prop="remark">
						<u-input class="form-input" v-model="form.remark" placeholder="请输入备注"/>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="u-margin-top-30" @click="submitAction">
			<animate-button ref="animeBtn" btn-text="提交"></animate-button>
		</view>
		<u-gap height="100"></u-gap>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				type: null,
				yqShow: false,
				dateShow: false,
				yqList: [],
				form: {
					deptId: '',
					deptName: '',
					sjSsDate: '',
					tbr: '',
					bbxr: '',
					ytbr: '',
					idCard: '',
					phone: '',
					ssName: '',
					zdYs: '',
					kfHfJg: '',
					yqZgDjJg: '',
					kfZcHfJg: '',
					remark: '',
				},
				rules: {
					deptName: [
						{
							required: true,
							message: '请选择院区！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					sjSsDate: [
						{
							required: true,
							message: '请选择实际手术日期！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					tbr: [
						{
							required: true,
							message: '请输入投保人！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					bbxr: [
						{
							required: true,
							message: '请输入被保险人！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					ytbr: [
						{
							required: true,
							message: '请输入与投保人关系！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					idCard: [
						{
							required: true,
							message: '请输入身份证号！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					phone: [
						{
							required: true,
							message: '请输入联系号码！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					ssName: [
						{
							required: true,
							message: '请输入手术名称！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					zdYs: [
						{
							required: true,
							message: '请输入主刀医生！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					kfHfJg: [
						{
							required: true,
							message: '请输入客服回访结果！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
				},
			};
		},
		methods: {
			getDetail(id) {
				this.$api.hfDetails({
					id
				}).then(res => {
					let d = res.data
					this.id = d.id
					this.form = {
						deptId: d.deptId,
						deptName: d.deptName,
						sjSsDate: d.sjSsDate,
						tbr: d.tbr,
						bbxr: d.bbxr,
						ytbr: d.ytbr,
						idCard: d.idCard,
						phone: d.phone,
						ssName: d.ssName,
						zdYs: d.zdYs,
						kfHfJg: d.kfHfJg,
						yqZgDjJg: d.yqZgDjJg,
						kfZcHfJg: d.kfZcHfJg,
						remark: d.remark,
					}
				})
			},
			getDepList() {
				this.$api.deptList({
					current: 1,
					size: 999
				}).then(res => {
					let data = res.data
					for (let i of data.records) {
						this.yqList.push({
							name: i.deptName,
							id: i.deptId
						})
					}
				})
			},
			onConfirmType1(item) {
				this.form.deptId = item[0].value
				this.form.deptName = item[0].label
			},
			onConfirmType2(item) {
				this.form.sjSsDate = `${item.year}-${item.month}-${item.day}`
			},
			submitAction() {
				if (this.$refs.animeBtn.status != 1) return
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$refs.animeBtn.loading()
						let params = this.type == 0 ? { id: 0 } : { id: this.id }
						this.$api.hfAddOrUpdate({
							...this.form,
							...params,
						}).then(res => {
							this.$refs.animeBtn.success()
							this.$refs.uToast.show({
								title: '上传成功',
								type: 'success',
								back: true,
								duration: 1500,
								callback: () => {
									this.$fallback(1, 
										{
											key: 'reset',
										},
									)
								}
							});
						}).catch(() => {
							this.$refs.animeBtn.fail()
							setTimeout(()=> {
								this.$refs.animeBtn.reset()
							}, 3000)
						})
					} else {
						return
					}
				});
			}
		},
		onLoad() {
			const {
				type,
				id
			} = this.$Route.query;
			this.id = id;
			this.type = type;
			if (type == 1) {
				this.getDetail(id)
			} else {
				this.form.sjSsDate = this.$u.timeFormat(new Date(), 'yyyy-mm-dd');
			}
			uni.setNavigationBarTitle({
				title: type == 0 ? '回访数据表上传' : '回访数据表编辑'
			})
			this.getDepList();
		},
		onReady() {
			if (this.type != 1) {
				this.$refs.uForm.setRules(this.rules);
			}
		}
	}
</script>

<style>
	.select-box{
		width: 100%;
	}
</style>